<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/talents/index'}">人才信息</el-breadcrumb-item>
      <el-breadcrumb-item>人才简历</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="body">
      <img :src="headerImg" alt="" >
      <div class="name">
        <h3>{{ name }}</h3>
        <div class="messages">
          <div class="message">
            <span>性别：{{gender}}</span>
            <span>出生年月：{{birthday}}</span>
            <span>手机号：{{phone}}</span>
          </div>
          <div class="message-right">
            <span>学历：{{education}}</span>
            <span>参加工作时间：{{workTime}}</span>
            <span>微信号：{{wechat}}</span>
          </div>
        </div>
      </div>
    </div>
    <hr>
    <div class="body-a">
      <h3>求职意向</h3>
      <span>状态:&nbsp;{{ qiuzstate }}</span>
      <br>
      <div class="body-qw">
        <span>期望岗位：</span>
        <div v-for="item in qwzw" :key="item" class="qw-item">
          <span >{{ item }} </span>
        </div>
      </div>
      <div class="body-qw">
        <span>期望城市：</span>
        <div v-for="item in workcity" :key="item" class="qw-item">
          <span >{{ item }} </span>
        </div>
      </div>
      <div class="body-qw">
        <span>期望薪资：</span>
        <span >{{ xzyq }} </span>
      </div>

<!--      <div v-for="item in allmenu" :key="item">-->
<!--        <span >{{ item.positions }}&nbsp;&nbsp;|&nbsp;&nbsp;{{ item.address }}&nbsp;&nbsp;{{item.min}}-{{item.max}}k</span>-->
<!--      </div>-->
    </div>
    <hr>
    <div class="body-a">
      <h3>个人介绍</h3>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{introduction}}</p>
    </div>
    <hr>
    <div class="body-a">
      <h3>职业证书</h3>
      <div style="display: flex; flex-wrap: wrap; gap: 15px; width: 100%;">
        <div style="height: auto; margin-right: 0; flex: 0 0 calc(20% - 15px);" v-for="item in certificate" :key="item">
          <div style="position: relative; display: block; width: 100%;">
            <div style="position:absolute; text-align: center; width: 25%; height: 20%; background-color: #6f7180; text-align: center; line-height: 20px; border-radius: 10px 0 10px 0;">{{ item.lever }}</div>
            <el-image :src="item.jlzs_img_uri[0].url" style="width: 100%; height: auto; border-radius: 8px; z-index: -1"/>
          </div>
          <span style="display: block; margin-top: 8px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ item.jlzs_name }}</span>
          <span style="background-color: #6f7180; font-size: 15px; color: white">{{ item.authentication }}</span>
        </div>
      </div>
    </div>
    <hr>
    <div class="body-a">
      <h3>工作经历</h3>
      <div style="width: 100%">
        <div style="width: 100%;margin-left: 2%" v-for="item in job" :key="index">
          <div style="display: flex">
            <span style="width: 15%">〇</span>
            <span style="margin-left: -10%">{{ item.jlgz_gongsiname }}</span>
            <span style="margin-left: 2%">{{ item.jlgz_zhiweinam }}</span>
            <span style="margin-left: 2%; color: #6f7180;">{{ item.jlgz_indate}}-{{ item.jlgz_outdate}}</span>
          </div>
          <span style="margin-left: 5%;margin-top: 2%; font-size: 14px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.jlgz_workdetail }}</span>
        </div>
      </div>
    </div>
    <hr>
    <div class="body-a">
      <h3>行业荣誉</h3>
      <div style="margin-left: 2%;" v-for="item in honor" :key="item">
        <div style="display: flex">
          <span style="width: 15%">〇</span>
          <span style="margin-left: -10%">{{ item.name }}</span>
          <span style="margin-left: 2%">{{ item.rank }}</span>
          <span style="margin-left: 2%; margin-top: 1.4%">{{ item.time }}</span>
          <el-link type="primary" @click="" style="margin-left: 2%;margin-top: 1.2%" :underline="false"></el-link>
        </div>
        <span style="margin-left: 5%;margin-top: 2%; font-size: 14px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.introduction }}</span>
      </div>
    </div>
    <hr>
    <div class="body-a">
      <h3>教育经历</h3>
      <div style="margin-left: 2%" v-for="item in educations" :key="item">
        <div style="display: flex">
          <span style="width: 15%">〇</span>
          <span style="margin-left: -10%">{{ item.jljy_school }}</span>
          <span style="margin-left: 2%">{{ item.jljy_zhuanye }}</span>
          <span style="margin-left: 2%;">{{ item.jljy_indate }}-{{ item.jljy_outdate }}</span>
          <div v-if="item.up" style="margin-left: 2%;">
            <el-link type="primary" @click="" :underline="false">毕业证书</el-link>
          </div>
<!--          <div v-else style="margin-left: 2%;">-->
<!--            <el-link type="info" @click="" disabled>毕业证书(未上传)</el-link>-->
<!--          </div>-->
        </div>
      </div>
    </div>
    <hr>
    <div class="body-a">
      <h3>培训经历</h3>
      <div style="margin-left: 2%">
        <div style="display: flex" v-for="item in training" :key="item">
          <span style="width: 15%">〇</span>
          <span style="margin-left: -10%">{{ item.jlpx_school }}</span>
          <span style="margin-left: 2%">{{ item.jlpx_zhuanye }}</span>
          <span style="margin-left: 2%;">{{ item.jlpx_traindate }}</span>
<!--          <el-link type="primary" @click="" style="margin-left: 2%;margin-top: 1.2%" :underline="false">结业证书</el-link>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent} from 'vue'
import { queryjlfull } from "../../api/PractitionerApi";

export default defineComponent({
  name: "Resume",
  data() {
    return {
      headerImg: '',
      name: '',
      gender: '',
      birthday: '',
      phone: '',
      education: '',
      workTime: '',
      wechat: '',
      qiuzstate: '',
      qwzw:[],
      workcity:[],
      xzyq: '',
      introduction: '',
      certificate:[],  ///职业证书
      job:[], ///工作经历
      honor:[
        {
          name:'',
          rank:'',
          time:'',
          introduction:''
        }
      ],
      educations:[
        {
          school: '上海XX大学',
          professional: '护理专业',
          start: '2021',
          end: '2023',
          up: false
        }
      ],
      training:[
        {
          name:'XXX培训机构',
          professional:'护理专业',
          time:'2020/01'
        }
      ],
      usercode:'',  ////接收上一页传过来的参数
    }
  },
  created() {
    this.usercode =  this.$route.query.usercode;
    console.log('简历详情：',this.usercode);
    this.resumeDetails()
  },
  methods:{
    resumeDetails() {
      queryjlfull({
        usercode: this.usercode,
      }).then(res => {
        console.log('details:', res)
        const base_info = res.data.data.base_info
        // 基础信息
        this.headerImg = base_info.base.header_img_uri[0].url
        this.name = base_info.base.jlbi_name
        this.gender = base_info.base.jlbi_sex
        this.birthday = base_info.base.jlbi_birth
        this.phone = base_info.base.jlbi_phoneno
        this.education = base_info.base.jlbi_xueli
        this.workTime = base_info.base.jlbi_workindate
        this.wechat = base_info.base.jlbi_wxopenid
        //求职意向
        this.qiuzstate = base_info.qz.jlqz_qiuzstate
        this.qwzw = base_info.qz.jlqz_qwzw
        this.workcity = base_info.qz.jlqz_workcity
        this.xzyq = base_info.qz.jlqz_xzyq
        //  个人介绍
        this.introduction = base_info.personal.jlbi_personview
        // 职业证书
        this.certificate = base_info.zyzs
        // 工作经历
        this.job = base_info.gzjl
        // 荣誉证书
        this.honor = base_info.hyry
        // 教育经历
        this.educations = base_info.jyjl
        // 培训经历
        this.training = base_info.pxjl




        // this.allmenu =

      })
    }

  }
})
</script>

<style scoped>
.body{
  width: 100%;
  height: 12.5%;
  display: flex;
  img{
    border-radius: 5px;
    margin-left: 1.5%;
    margin-top: 1.5%;
    width: 7.5%;
    height: 10%;
  }
  .name{
    width: 70%;
    margin-left: 3%;
  }

  .messages{
    width: 75%;
    display: flex;
    span{
      margin-top: 2.5%;
    }
  }

  .message{
    width: 45%;
    margin-left: 1.5%;
    display: grid;
  }
  .message-right{
    display: grid;
  }

  h3{
    margin-left: 1.5%;
  }
}
hr{
  width: 60%;
  float:left;
  margin-left: 1.5%;
}

.body-a{
  width: 60%;
  margin-left: 1.5%;
  margin-bottom: 1%;
}
.body-qw {
  display: flex;
}
.qw-item {
  margin-right: 10px;
}
</style>
